<template>
<div class="pd_tb10">
    <div class="flex_sb mb10">
        <div class="title_1">投标授权用印申请</div>
        <el-button plain icon="Plus" type="primary" @click="add">新增</el-button>
    </div>
    <el-table v-loading="loading" :data="tableList">
        <el-table-column label="序号" type="index"  min-width="60" align="center"/>
        <el-table-column label="描述" prop="authorityDesc" min-width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="申请人" prop="createName" min-width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="提交申请时间" prop="createTime" min-width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="审批状态" prop="processStateStr" min-width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" fixed="right" min-width="160" class-name="small-padding fixed-width">
          <template #default="{ row }">
            <el-button link type="primary" @click="fileDataVisible = true">查看附件</el-button>
            <el-button link type="primary" @click="showDetail('detail')">详情</el-button>
            <el-button link type="primary" @click="showDetail('approval')">审批</el-button>
          </template>
        </el-table-column>
    </el-table>
    <pagination
        v-show="total > 10"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    <!-- 新增表单 -->
    <el-dialog v-model="addFormVisible" @close="addDialogClose" title="新增投标授权用印申请" width="60%" append-to-body>
      <el-form ref="addFormRef" class="custom-form" :model="addFormData" :rules="addFormRules" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请类型" prop="followupType">
              <el-input disabled v-model="addFormData.followupType" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提出人" prop="followupPerson">
              <el-input disabled v-model="addFormData.followupPerson" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提出时间" prop="followupDate">
              <el-date-picker disabled v-model="addFormData.followupDate" type="datetime" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用印类型" prop="authType">
              <el-radio-group v-model="addFormData.authType">
                <el-radio label="1">纸质</el-radio>
                <el-radio label="2">电子</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="问题描述" prop="followupDesc">
              <el-input type="textarea" v-model="addFormData.followupDesc" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="工作联系函" prop="fileIds">
                <file-upload
                    :isShowTip="false"
                    v-model="addFormData.fileIds"
                    :fileType="['pdf','jpg','png','jepg','doc','docx', 'xls', 'xlsx','pptx','ppt']"
                ></file-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="授权格式" prop="fileIds">
                <file-upload
                    :isShowTip="false"
                    v-model="addFormData.fileIds"
                    :fileType="['pdf','jpg','png','jepg','doc','docx', 'xls', 'xlsx','pptx','ppt']"
                ></file-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="招标文件" prop="fileIds">
                <file-upload
                    :isShowTip="false"
                    v-model="addFormData.fileIds"
                    :fileType="['pdf','jpg','png','jepg','doc','docx', 'xls', 'xlsx','pptx','ppt']"
                ></file-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="其他附件" prop="fileIds">
                <file-upload
                    v-model="addFormData.fileIds"
                    :fileType="['pdf','jpg','png','jepg','doc','docx', 'xls', 'xlsx','pptx','ppt']"
                ></file-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="center">
          <el-button type="primary" @click="saveContacts">提交申请</el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 详情、审批 -->
    <el-dialog v-model="detailFormVisible" :title="'投标授权用印申请' + dialogTypeName" width="60%" append-to-body>
      <DetailForm class="mb10" :dataSources="addFormData" :columns="followColumns"/>
      <!-- 详情表单 -->
      <el-form :model="addFormData" label-width="auto">
        <el-form-item label="OA附件">
          <el-button link type="primary">test.doc</el-button>
        </el-form-item>
        <el-form-item label="审批进度">
          <el-table :data="approvalHistory">
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="流程环节" prop="handleDept" min-width="120" align="center" show-overflow-tooltip/>
            <el-table-column label="处理人" prop="assigneeName" min-width="120" align="center" show-overflow-tooltip/>
            <el-table-column label="处理时间" prop="endDate" min-width="150" align="center" show-overflow-tooltip/>
            <el-table-column label="处理结果" prop="approveOperateText" min-width="100" align="center" show-overflow-tooltip/>
            <el-table-column label="处理意见" prop="comment" min-width="200" align="center" show-overflow-tooltip/>
            <el-table-column label="处理状态" prop="taskStatus" min-width="100" align="center" show-overflow-tooltip/>
            <el-table-column label="审批附件" min-width="120" align="center">
              <template #default="{ row, $index }">
                <el-button type="primary" link v-for="(item, index) in row.taskFile"
                  :key="$index + '.' + index + '.taskFile'">{{ item.name }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="上传附件" min-width="120" align="center">
              <template #default="{ row, $index }">
                <el-button type="primary" link v-for="(item, index) in row.uploadFile"
                  :key="$index + '.' + index + '.uploadFile'">{{ item.name }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <!-- 审批表单 -->
      <ApprovalForm v-if="dialogType === 'approval'" @confirm="closeDetailFormVisible"/>
    </el-dialog>

    <!-- 查看附件 -->
    <el-dialog v-model="fileDataVisible" title="查看附件" width="50%" append-to-body>
      <el-form :model="fileData" label-width="auto">
        <el-form-item label="OA附件" prop="followupDesc">
          <el-button link type="primary">test.doc</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</div>
</template>
        
<script setup>
import ApprovalForm from "./ApprovalForm"

const fileDataVisible = ref(false)

const loading = ref(false);
const tableList = ref([]);
const total = ref(0);
const queryParams = reactive({
  certNo: "",
  pageNo: 1,
  pageSize: 10,
});
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    tableList.value = [
      {
        authorityDesc: '项目启动申请用印',
        createName: '张三',
        createTime: '2022-01-01 12:00:00',
        processStateStr: '审批通过'
      }
    ];
    total.value = Number(tableList.value.length);
    loading.value = false;
  }, 300);
};
getList();

// 跟进详情-start
const dialogType = ref('')
const dialogTypeName = computed(() => {
    return dialogType.value === 'detail' ? '详情' : '审批'
})
const detailFormVisible = ref(false)
const showDetail = (type) => {
  dialogType.value = type
  detailFormVisible.value = true
}
const closeDetailFormVisible = () => {
  detailFormVisible.value = false
}
const followColumns = ref([
  {label: '申请类型', column: 'followupType', span: 8},
  {label: '提出人', column: 'followupPerson', span: 8},
  {label: '提出时间', column: 'followupDate', span: 8},
  {label: '用印类型', column: 'authType', span: 8},
  {label: '用印描述', column: 'followupDesc', span: 16}
])
const approvalHistory = ref([
  {
    taskName: '申请人提交',
    handleDept: '申请人提交',
    assigneeName: '王丽丽',
    endDate: '2024-06-12 10:26:00',
    approveOperateText: '通过',
    comment: '--',
    taskStatus: '已处理',
    taskFile: [{name: 'test.png'}],
    uploadFile: [{name: 'test.png'}],
    reviewOpinion: ''
  },
  {
    taskName: '审批人提交',
    handleDept: '审批员审批',
    assigneeName: '王丽丽',
    endDate: '2024-06-12 10:26:00',
    approveOperateText: '通过',
    comment: '我同意这个申请',
    taskStatus: '已处理',
    taskFile: [{name: 'test.png'}],
    uploadFile: [{name: 'test.png'}],
    reviewOpinion: ''
  }
])
// 跟进详情-end

// 增加联系人-start
const add = () => {
  addFormVisible.value = true
};
const addFormVisible = ref(false)
const addFormRef = ref(null)
const addFormRules = {
  followupDesc: [
    { required: true, message: "请输入", trigger: "blur" },
  ]
}
const addFormData = reactive({
  followupType:'投标授权用印申请',
  followupDate:'2024-07-25 12:23:10',
  followupPerson:'王丽丽',
  authType:'',
  followupDesc:'',
  fileIds:[]
})
const addDialogClose = () => {
  addFormRef.value.resetFields()
  addFormVisible.value = false
}
const saveContacts = () => {
  console.log(addFormRef.value);
  addFormRef.value.validate(valid => {
    if(valid){
      addDialogClose()
    }
  })
}
// 增加联系人-end
</script>
      
<style lang="scss" scoped>
.pd_tb10 {
  padding: 10px 0;
}
</style>